<template>
	<t-modal :width="950" :visible="visible" :title="title" @ok="handleSubmit" @cancel="close"
		style="top:50px" cancelText="关闭">
		<a-row class="t-row" :gutter="24" style="background-color: #ececec; padding: 10px; margin: -10px">
			<!-- <a-col :md="8" :sm="24">
				<a-card :bordered="false">
					<div style="height: calc(100% - 40px);">
					  <s-table
					    ref="table"
					    size="small"
					    :columns="columns"
					    :data="loadData"
					    rowKey="name"
					    :showPagination="false"
					    :rowSelection="rowSelection"
					    @rowClick="rowClick"
					    :rowClassName="rowClassName"
					  >
					  </s-table>
					</div>
				</a-card>
			</a-col> -->
			<a-col :md="24" :sm="24">
				<a-card :bordered="false">
					<div class="toolbar flex flex-wrap" style="width: 100%;margin-bottom: 7px;">
						<div class="table-page-search-wrapper">
							<a-form layout="inline">
								<div class="flex justify-between flex-wrap">
									<a-form-item label="数据库">
										<a-select v-model="defaultDataBase" style="width: 194px" placeholder="请选择数据库" @change="selectDatabase">
											<a-select-option v-for="item in databaseList" :key="item.uuid" :value="item.uuid">
												{{ item.name }}
											</a-select-option>
										</a-select>
									</a-form-item>
									<a-form-item label="数据表">
										<a-input v-model="queryParam.tableName" placeholder="请输入要搜索的表名" />
									</a-form-item>
									<div class="table-page-search-submitButtons flex">
										<a-button class="cu-btn-primary" @click="fetch()">查询
										</a-button>
										<a-button class="cu-btn-filter" @click="refreshSubList()">重置</a-button>
									</div>
								</div>
							</a-form>
						</div>
					</div>
					<div class="page-common-sub-box">
						<div style="height: calc(100% - 30);">
						  <a-table
						    ref="subList"
						    size="small"
								:loading="tableLoading"
						    :columns="columnsDicItem"
						    :data-source="dataSource"
						    :rowSelection="rowSelectionDic"
						    rowKey="tableName"
						    showPagination="auto"
						    :pagination="pagination"
						    @change="handleTableChange"
						    :scroll="scrollXY"
						  >
						    <span slot="serial" slot-scope="text, record, index">
						      {{ index + 1 }}
						    </span>
						  </a-table>
						</div>
					</div>
				</a-card>
			</a-col>
		</a-row>
	</t-modal>
</template>

<script>
	import {
		STable
	} from "@/components";
	import { dataListMixin } from "@/mixins/dataListMixin";
	import { simpleListMixin } from "@/mixins/simpleListMixin";

	export default {
		name: "TreeList",
		props: ["visible", "modalWidth"],
		mixins: [dataListMixin, simpleListMixin],
		components: {
			STable,
		},
		data() {
			return {
				title: "选择本地数据表",
				confirmLoading: false,
				mdl: null,
				// 查询参数
				queryMasterParam: {},
				queryParam: {},
				userPost: [],
				// 表头
				columns: [{
					title: "数据库",
					align: "center",
					dataIndex: "name"
				}],
				columnsDicItem: [{
						title: "序号",
						align: "center",
						width: 50,
						scopedSlots: {
							customRender: "serial",
						}
					},
					{
						title: "表名",
						align: "left",
						dataIndex: "tableName"
					},
					{
						title: "表注释",
						align: "left",
						dataIndex: "tableRemarks"
					}
				],
				orgTree: [],
				// loadData: (parameter) => {
				// 	const requestParameters = Object.assign({}, parameter, this.queryMasterParam);
				// 	return this.$post(this.url.getMasterData, requestParameters).then(
				// 		(res) => {
				// 			return res;
				// 		}
				// 	);
				// },
				dataSource: [],
				pagination: {
				  pageSize: 500,
				  showSizeChanger: true,
				  showQuickJumper: true,
				  hideOnSinglePage: false,
				  pageSizeOptions: ['20', '50','100','500'],
				  onShowSizeChange: (current, pageSize) =>
				    this.onShowSizeChange(current, pageSize),
				},
				selectedRowKeys: [],
				selectedRows: [],
				masterSelectedRowKeys: [],
				selectedRowKeysDic: [],
				selectedRowsDic: [],
				advanced: false,
				userNameId: "",
				dicUuids: "",
				info: "",
				infoUserPost: "",
				orgName: "",
				orgId: "",
				showFlag: true,
				subHeight : 0,
				url: {
					getMasterData: "/system/sysDatabaseConnection/getPageSet",
					getTable: "/system/sysDatabaseConnection/getTable",
					getOrgTree: "/mdata/organization/getListByLevelId?levelId=1",
					getUserList: "/mdata/user/getPageSet",
					getTreeListByPid: "/mdata/organization/getListByPid",
					getUserListByUuids: "/mdata/user/getListByUuids",
				},
				tableLoading: false,
				databaseList: [],
				defaultDataBase: '0DD9F4D5DFB546EEBE12E027DC43EB9B', // 默认选中系统默认数据库
			};
		},
		computed: {
			hasSelected() {
				return this.selectedRowKeys.length > 0;
			},
			scrollXY(){
				let subHeight = this.subHeight ? this.subHeight : 500
				let height = subHeight - 40 - 40
				return { y : height};
			},
			rowSelection() {
			  return {
			    selectedRowKeys: this.masterSelectedRowKeys,
			    onChange: this.onSelectChangeMaster,
			  };
			},
			rowSelectionDic() {
			  return {
			    selectedRowKeys: this.selectedRowKeysDic,
			    onChange: this.onSelectChangeDic,
			  };
			},
		},
		watch: {
			
		},
		created() {
			this.$nextTick(() => {
			if (this.databaseList.length === 0) {
				this.$post('/system/sysDatabaseConnection/getPageSet').then(res => {
					if (res.statusCode !== 300) {
						this.databaseList = res.rows;
						this.queryParam = {
							uuid: this.defaultDataBase,
						};
						this.fetch();
					} else {
						this.$message.error(res.message ? res.message : '获取数据库数据失败', 1.5);
					};
				});
			};
			})
			// 该方法触发屏幕自适应
			this.resetScreenSize();
			this.$nextTick(()=>{
				this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
			})
		},
		methods: {
			// 顶部搜索栏选择数据库
			selectDatabase(e) {
				this.queryParam = {
					uuid: e,
				};
				this.fetch();
			},
			// 获取列表
			fetch(params) {
				this.tableLoading = true;
			  this.$post(this.url.getTable, this.queryParam).then(
			    (res) => {
						this.tableLoading = false;
						this.selectedRowsDic = []
						this.selectedRowKeysDic = []
						this.dataSource = []
						this.pagination = {}
						this.pagination.total = 0
			      if(res.statusCode != 300){
							const pager = {
							  ...this.pagination,
							};
							pager.total = res.length;
							this.dataSource = res;
							this.pagination = pager;
						}
			    }
			  );
			},
			refreshSubList() {
				this.queryParam = {
					uuid: this.queryParam.uuid
				};
				this.fetch()
			},
			close() {
				this.$emit("cancel")
			},
			handleSubmit() {
				if(this.selectedRowsDic.length){
					this.$emit("ok", this.selectedRowsDic, this.selectedRowKeysDic.toString(), this.queryParam.uuid);
					this.close();
				}else{
					this.$message.warn('请选择一条数据', 1.5)
				}
			},
			// 行点击事件
			rowClick(record, rows) {
			  this.queryParam = {
					uuid: record.uuid
				};
			  this.fetch();
			},
			// 触发屏幕自适应
			resetScreenSize() {
				const screenWidth = document.body.clientWidth;
				if (screenWidth < 500) {
					this.scrollTrigger = {
						x: 800
					};
				} else {
					this.scrollTrigger = {};
				}
			},
			onSelectChangeResh(changeableRowKeys) {
				console.log(changeableRowKeys);
			},
			onSelectChange(selectedRowKeys, selectedRows) {
				this.selectedRowKeys = selectedRowKeys;
				this.selectedRows = selectedRows;
			},
			toggleAdvanced() {
				this.advanced = !this.advanced;
			},
			// 行勾选事件
			onSelectChangeDic(selectedRowKeys, selectedRows) {
			  this.selectedRowKeysDic = selectedRowKeys;
			  this.selectedRowsDic = selectedRows;
			},
		},
	};
</script>

<style lang="less" scoped="scoped">
	/deep/.ant-form-item-label {
		line-height: inherit;
	}
	/deep/.ant-card-body {
		padding: 0 10px 10px !important;
	}
	.t-row.ant-row {
		background: #fff !important;
	}

	.custom-tree {
		/deep/ .ant-menu-item-group-title {
			position: relative;

			&:hover {
				.btn {
					display: block;
				}
			}
		}

		/deep/ .ant-menu-item {
			&:hover {
				.btn {
					display: block;
				}
			}
		}

		/deep/ .btn {
			display: none;
			position: absolute;
			top: 0;
			right: 10px;
			width: 20px;
			height: 40px;
			line-height: 40px;
			z-index: 1050;

			&:hover {
				transform: scale(1.2);
				transition: 0.5s all;
			}
		}
	}
</style>
